import {replaceByObj} from './xUtil.js';
import xID from "./xID.js";
/*
*   {style,duration,recieve,showType}
*   data Item: {type,Alert}
*   showType : top | bottom
*   type:warn|error|success|info
*/


const tmplAlert =
      `<div class="{{style}}"  style="display: none">
        <div type="type" class="{{type}}">
        <div type="content" >
			    <span type="alert">{{alert}}</span>	    
		    </div>	
		    <div type="tail">
		        <i type ="close" data-code="{{code}}" class="flat iconfont icon-close"></i>
		    </div>
		    </div>
		   </div>
        `;

export default class xAlert{

    //显示的通知
    vShow = [];
    vCfg ={
        span:15,
        position:30,
        showType:'top'
    }
    
    static getInstance() {
        if(!xAlert.instance) {
            xAlert.instance = new xAlert();
        }
        return xAlert.instance;
    }

    static setCfg(cfg){
        xAlert.getInstance().vCfg = cfg;
    }

    evClose(e){
        let $item;
        let code = e.target.getAttribute("data-code");
        for(let n of this.vShow){
            if (n.find(e.target).length>0) {
                $item = n;
                break;
            }
        }
        if($item)
            this.closeAlert($item,code)
    }

    createAlert(item){
        let code = xID.getID();
        let alertHtml = replaceByObj(tmplAlert,{style:this.vCfg.style||'xAlert',
             type:item.type||'info',alert:item.alert,code});
        let $item =  $(alertHtml);
        $('body').append($item);
        this.showAlert($item);
        $item.on('click.'+code,this.evClose.bind(this));
        let duration = item.duration??2000;
        if(duration){
            setTimeout(()=>{ this.closeAlert($item,code)}
                ,duration);
        }

    }

    showAlert($item){
        let span = this.vCfg.span||15;
        let nextPosition = this.vCfg.position||30;
        for(let n of this.vShow){
            nextPosition =  nextPosition+n.outerHeight()+span;
        }
        this.vShow.push($item);
        switch (this.vCfg.showType||'top'){
            case 'bottom':
                $item.css("bottom",nextPosition+'px');
                break;
            default:
                $item.css("top",nextPosition+'px');
        }
        $item.fadeIn("slow");
    }

    //关闭
    closeAlert($item,code){
        if(this.vShow.includes($item)){
            this.vShow = this.vShow.filter(n => n!=$item);
            //删除 close 事件
            $item.off('click.'+code);
            $item.fadeOut("slow",this.moveAlert());
            //1秒后 删除
            setTimeout(()=>{ $item.remove() } ,1000);
        }
    }

    moveAlert(){
        //间隔
        let span = this.vCfg.span||15;
        let nextPosition = this.vCfg.position||30;
        for(let n of this.vShow){
            switch (this.vCfg.showType){
                case 'bottom':
                    n.css("bottom",nextPosition+'px');
                    break;
                default:
                    n.css("top",nextPosition+'px');
            }
            nextPosition =  nextPosition+n.outerHeight()+span;
        }
    }

    static info(alert,duration){
        xAlert.getInstance().createAlert({type:"info",alert,duration}) ;
    }

    static success(alert,duration){
        xAlert.getInstance().createAlert({type:"success",alert,duration}) ;
    }

    static error(alert,duration){
        xAlert.getInstance().createAlert({type:"error",alert,duration}) ;
    }

    static warn(alert,duration){
        xAlert.getInstance().createAlert({type:"warn",alert,duration}) ;
    }

}

